<template>
  <div>
    <el-row>
      <el-col :span="12" class="charts-box">
        <ve-line :data="chartData" height="400px" class="charts-border" />
        <ve-histogram :data="chartData" height="400px" />
      </el-col>
      <el-col :span="12" class="charts-box">
        <ve-pie :data="chartData" height="400px" class="charts-border" />
        <ve-radar :data="chartData_1" height="400px" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { chartData } from '@/api/search'
export default {
  name: 'HistoGram',
  data: function() {
    return {
      filterData: {
        date: '时间',
        count: '新闻数'
      },
      chartData: {
        columns: ['日期', '新闻数', '轮播图数'],
        rows: []
      },
      chartData_1: {
        columns: ['日期', '新闻数', '轮播图数', '下单率'],
        rows: [
          {
            日期: '2023-03-04',
            新闻数: 133,
            轮播图数: 109,
            下单率: 0.32
          },
          {
            日期: '2023-03-03',
            新闻数: 350,
            轮播图数: 320,
            下单率: 0.32
          },
          {
            日期: '2023-03-02',
            新闻数: 1393,
            轮播图数: 1093,
            下单率: 0.32
          },
          {
            日期: '2023-02-28',
            新闻数: 3530,
            轮播图数: 3230,
            下单率: 0.32
          }
        ]
      }
    }
  },
  mounted() {
    this.getComprehensive()
  },
  methods: {
    async getComprehensive() {
      try {
        const response = await chartData()
        console.log('response: ', response)
        this.chartData.rows = response.data.map((item) => {
          return {
            日期: item.date,
            新闻数: item.newsCount,
            轮播图数: item.bannerCount
          }
        })
      } catch (error) {
        console.log('error: ', error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.charts-box {
  border: 1px solid #666;
  padding: 20px;
  box-sizing: border-box;
}
.charts-box:nth-child(1) {
  border-right: 0;
}
.charts-border {
  border-bottom: 1px dotted #666;
  margin-bottom: 30px;
}
</style>
